<script setup>
import { ref } from 'vue'
import { getTopUpAPI,getBalanceAPI } from "@/apis/pay.js";
const topUpShow=ref(false)
  let dataPrice=[8,18,58,88,188,588,1888,9888]
  const topUpForm=ref({
  password:'',
  topUp:''
})
  // const topUpForm=ref()
  const Func=(index)=>{
    console.log(index)
    topUpForm.value.topUp=index
    //console.log(dataPrice[index])
  }
  const Func2 = () => {
    console.log(topUpForm.value.topUp)
    topUpShow.value=true
  }

  const Balance=ref()
  const getBalance=async()=>{
    const res=await getBalanceAPI()
    console.log(res)
    Balance.value=res.data.data
  }
  getBalance()
  const sumbittopUp = async() => {
    console.log("充值信息",topUpForm.value)
    // console.log(topUpForm.value.topUp)
    await getTopUpAPI(topUpForm.value)
    topUpShow.value=false
    getBalance()
    ElMessage({
      message: '充值成功',
      type: 'success',
    })
  }
</script>
<template>
  <div style="height:700px">
  <el-header style="margin-bottom:100px">
    <h1 class="header">茶币余额 {{ Balance }}</h1>
    <h2>茶币充值</h2>
    <hr class="header-hr">
    <h4 class="number">充值数量</h4>
</el-header>
<el-main class="header-div">
  
  <ul class="ul">
    <li v-for="(item,index) in dataPrice.splice(0,8)" :key="index" @click="Func(item)">
      <el-card style="max-width: 180px" class="card" shadow="Always">
      <div class="card-header">
        <span>
          <strong class="strong-font">{{ item }}</strong> 茶币
          <p class="p-font">{{item}}￥</p>
        </span>
      </div>
    </el-card>
  </li>
  </ul>
  
</el-main>
<el-footer>
  <input label="自定义：" type="text" style="border: 1px solid black;" class="input" v-model="topUpForm.topUp">
    <el-button type="primary" style="width: 150px;" @click="Func2">充值</el-button>


<p class="footer-pay " style="margin-top: 30px;">支付即同意茶币用户协议</p>
</el-footer>
  </div>


<el-dialog v-model="topUpShow" title="充值" width="20%">
  <el-form :model="topUpForm">
    <el-form-item label="充值金额:" label-width="100px" > 
      <div>
        {{ topUpForm.topUp }}
      </div>
    </el-form-item>
    <el-form-item label="密码:"  label-width="100px">
      <el-input v-model="topUpForm.password" type="password" placeholder="充值密码与登录密码一致">
      </el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="topUpShow = false">取消</el-button>
      <el-button type="primary" @click="sumbittopUp">
        充值
      </el-button>
    </span>
  </template>
</el-dialog>

</template>


<style lang="scss" scoped>
.input{
  width: 150px;
  height: 50px;
  border-radius: 10px;
  margin:0 200px;
  font-size: 30px;
}
.header {
  text-align: center;
  color: $xtxColor;
}
.header-hr {
  background-color: #adadad;
  height: 1px;
  border: none;
}
.number {
  color: #adadad;
  padding-bottom: 25px;
}
.header-div {
  margin: 0 auto;
  .ul li {
  padding-bottom: 30px;
  // display: block;
  float: left;
  padding-left: 30px;
  .card {
  border-radius: 20px;
  .card-header {
    vertical-align: middle;
  width: 150px;
  text-align: center;
  height: 100px;
  .strong-font {
  text-align: center;
  font-size: 35px;
  color: $xtxColor;
}
.p-font {
  text-align: center;
  font-size: 20px;
}
}
}
.card3 {
  width: 600px;
  height: 142px;
  border-radius: 20px;
  .p-font {
    color: $xtxColor;
    font-size: 18px;
    text-align: center;
  }
}
}
}
.footer-pay {
  text-align: center;
  color: $xtxColor;

}



</style>